<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>企业专区</title>
    <style>
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }
        .tc{
            text-align: center;
            margin: 30px 0
        }
        .shopping{
            width: 400px;
            height: 60px;
            background-color: #284558;
            display: block;
            line-height: 60px;
            color: white;
            text-decoration: none;
            text-align: center;
            margin: 0 430px 50px 430px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">蛋糕</el-menu-item>
                    <el-menu-item index="3">下午茶</el-menu-item>
                    <el-menu-item index="4">精选食材</el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                    </div>
                </el-menu>
            </div>
        </el-header>

        <el-main style="margin: 0 auto">
            <div style="margin-bottom: 30px">
                <img v-for="i in imgs.slice(0,3)" :src="i" style="width: 380px;margin:0 30px">
            </div>
            <p class="tc">有家蛋糕成立于2010年，是北京市第一家专门定制欧式方形蛋糕的企业，由中央工厂集中生产、点对点配送的经营模式。</p>
            <img src="imgs/企业专区5.png" alt="">
            <div>
                <a href="index.html"><img v-for="i in imgs.slice(3,6)" :src="i" style="width: 300px;margin:50px 70px"></a>
            </div>
            <img src="imgs/企业专区9.png" alt="">
            <p class="tc">常年供应<span style="font-size: 36px;color: #f55a19;">26</span>款蛋糕,产品符合国家食品安全QS标准，获得国际食品安全管理体系HACCP通用认证。</p>
            <div>
                <a href="detail.html"><img v-for="i in imgs.slice(6,9)" :src="i" style="width: 300px;margin:50px 60px 0 60px"></a>
                <a class="shopping" href="detail.html">查看全部</a>
            </div>
            <img src="imgs/企业专区10.png" style="margin-left: 130px" >
            <p class="tc" style="font-size: 24px;">选择<span style="font-size: 36px;color: #f55a19;">有家蛋糕</span>，就是选择健康安全、贴心周到。</p>
            <p class="tc" style="font-size: 24px;margin-top: 40px;">常年服务企业</p>
            <img src="imgs/企业专区11.png" style="width: 381px;height: 16px;display: block;margin: 15px auto;">
            <img src="imgs/企业专区12.png" style="margin: 15px 50px;">
        </el-main>

        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>

    </el-container>


</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                imgs:["imgs/企业专区1.jpg","imgs/企业专区2.jpg","imgs/企业专区3.jpg",
                    "imgs/企业专区6.jpg","imgs/企业专区7.jpg","imgs/企业专区8.jpg",
                "imgs/商品1.jpg","imgs/商品2.jpg","imgs/商品3.jpg"],
                activeIndex: '1'
            }
        },
        methods:{
            handleSelect(key,keyPath){
                console.log(key,keyPath);
            }
        }
    })
</script>
</html>